<!-- 服务详情 -->
<template>
	<view class="boxcss">
		<!-- 轮播图 -->
		<view class="swiperbox">
			<swiper class="swiperbox_swiper" autoplay circular>
				<swiper-item>
					<image class="swiperbox_swiper_img" :src="info.coverPic" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 标题and分享 -->
		<view class="hboxcss">
			<text class="hcss">{{info.name}}</text>
		</view>
		<!-- 间隔槽 -->
		<view class="gardbox"></view>
		<!-- 收费说明 -->
		<view v-if="info.cost.length > 0&&info.serve.price != '免费咨询'" class="desulcss">
			<view class="descriptioncss" v-for="(item,index) in info.cost" :key="index">
				<text class="deshcss">{{item.title}}：</text>
				<text class="destcss">{{item.content}}</text>
			</view>
		</view>
		<!-- 间隔槽 -->
		<view class="gardbox"></view>
		<!-- 服务详情富文本 -->
		<view  class="morebox">
			<rich-text :nodes="info.goodsDetail"></rich-text>
			<!-- <view class="product-detail">
			    <h1 class="product-title">飞科FH6370高速电吹风</h1>
			
			    <div class="product-highlights">
			      <h2>产品亮点</h2>
			      <ul>
			        <li>高速干发：110,000转/分钟电机，66米/秒风速</li>
			        <li>护发科技：高浓度负离子，抚平毛躁</li>
			        <li>智能温控：NTC系统，避免过热</li>
			        <li>多重降噪：宁静使用体验</li>
			        <li>时尚外观：轻巧设计，仅310克</li>
			      </ul>
			    </div>
			
			    <div class="product-details">
			      <h2>产品详情</h2>
			      <p>飞科FH6370高速电吹风，以其卓越的性能和时尚外观，成为您日常护发的理想选择。配备强大的电机和高速风扇，短发1分钟内吹干，长发也仅需3-5分钟。内置高浓度负离子发生器，有效中和静电，保护头发免受高温伤害，让您的秀发更加柔顺光滑。</p>
			
			      <p>智能温控系统每秒监测风温，自动调节，确保风温稳定在适宜范围，避免过热损伤头发。多重降噪技术让您在使用过程中几乎听不到噪音，享受宁静的吹发时光。轻巧的机身设计，长时间使用也不会感到疲劳，适合家庭、旅行或出差使用。</p>
			    </div>
			
			    <div class="product-specs">
			      <h2>产品规格</h2>
			      <table>
			        <tr>
			          <th>额定电压</th>
			          <td>220V</td>
			        </tr>
			        <tr>
			          <th>功率</th>
			          <td>高效节能，具体功率请参照产品说明</td>
			        </tr>
			        <tr>
			          <th>产品尺寸</th>
			          <td>轻巧设计，便于携带（具体尺寸请参照产品实物）</td>
			        </tr>
			        <tr>
			          <th>颜色</th>
			          <td>时尚外观，多种颜色可选（具体颜色请参照产品图片）</td>
			        </tr>
			      </table>
			    </div>
			
			    <div class="purchase-advice">
			      <h2>购买建议</h2>
			      <p>适合追求快速干发同时注重护发效果的用户，尤其是长发或卷发人群。飞科FH6370电吹风性价比极高，是您不可多得的护发神器。购买前请确认卖家提供的售后服务政策，以便在使用过程中遇到问题时能够及时得到解决。</p>
			    </div>
		</view> -->
		<!-- 间隔槽 -->
		<view class="gardbox"></view>
		<!-- 按钮 -->
		<view class="fixboxcss">
			<button class="kfboxcss" open-type="contact">
				<text class="kfhcss"  v-if="info.type == 2">{{info.price}}积分</text>
				<text class="kfhcss" v-if="info.type == 3">{{info.price}}</text>
			</button>
			<view class="btncss" @click="handleBuy()">
				立即支付
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import * as index from '@/api/index.js'
	export default {
		data() {
			return {
				Token: uni.getStorageSync('Token') ? true : false,
				Id: 0, //服务id
				title: '', //服务名称
				info: {}, //服务详情
				tableshow: false,
				userinfo:{},
				order:{}
			}
		},
		onLoad(e) {
			this.Id = e.id
			this.goodsDetail()
			this.userinfo = uni.getStorageSync('userinfo')
		},
		onShow() {
			this.Token = uni.getStorageSync('Token') ? true : false
		},
		methods: {
			// 防抖处理的购买方法
			handleBuy() {
				this.$tools.noMultipleClicks(() => {
					this.guarantee();
				});
			},
			
			// 原始购买逻辑
			guarantee(){
				if(this.userinfo.authentication == 1) {
					setTimeout(res=>{
						this.$tools.succend('请先去认证!')
						uni.navigateTo({
							url:'/pages/register/index'
						})
					},500)
				} else {
					var data = {
						userId:this.userinfo.userId,
						price:this.info.price,
						payType:3,
						goodsId:this.info.id,
						type:2,
						deliveryAddressId:11,
					}
					index.deliveryOrderAdd(data).then(res=>{
						console.log(res,'wx')
						this.order = res.order
						this.wxsPay()
								
					})
				}
				
			},
			wxsPay() {
				index.wxPay({userId:this.userinfo.userId,orderNo:this.order.orderNo}).then(res=>{
					console.log(res)
					uni.requestPayment({
					    provider: 'wxpay',    //支付类型-固定值
					    timeStamp: res.response.timeStamp, // 时间戳（单位：秒）
					    nonceStr: res.response.nonceStr, // 随机字符串
					    package: 'prepay_id=' +res.response.prepayId, // 固定值
					    signType: 'MD5', //固定值
					    paySign: res.response.paySign, //签名
					   success: res=> {
					     this.$tools.succend('购买成功!')
					     setTimeout(res=>{
					     	uni.navigateBack({
					     		data: 1
					     	})
					     },500)
					   },
					    fail:err=> {
							console.log( 
							res.response.timeStamp,
							 res.response.nonceStr,
							 res.response.package,
							 res.response.paySign)
					        console.log('fail:' + JSON.stringify(err));
					        console.log("支付失败");
					    }
					});
				})
			},
			//获取服务详情
			goodsDetail() {
				index.goodsDetail({
					id: this.Id
				}).then(res => {
					this.info = res.goodsDto
				})
			},
			//监听收费table高度
			gettableheight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tablecss').boundingClientRect(data => {
					console.log(data);
					this.tableshow = data.height > 408 ? true : false
				}).exec();
			},
		}
	}
</script>

<style scoped lang="scss">
	.boxcss {
		overflow-x: hidden;
		min-height: 100vh;
		padding-bottom: calc(env(safe-area-inset-bottom) + 110rpx);
		position: relative;
		background-color: #fff;
		.morebox {
			.product-detail {
			  padding: 20px;
			  background-color: #fff;
			}
			
			.product-title {
			  font-size: 24px;
			  font-weight: bold;
			  text-align: center;
			  margin-bottom: 20px;
			}
			
			.product-highlights,
			.product-details,
			.product-specs,
			.purchase-advice {
			  margin-bottom: 20px;
			}
			
			.product-highlights ul {
			  list-style-type: disc;
			  padding-left: 20px;
			}
			
			.product-highlights li,
			.product-details p,
			.purchase-advice p {
			  margin-bottom: 10px;
			}
			
			.product-specs table {
			  width: 100%;
			  border-collapse: collapse;
			}
			
			.product-specs th,
			.product-specs td {
			  padding: 8px;
			  border: 1px solid #ddd;
			  text-align: left;
			}
			
			.product-specs th {
			  background-color: #f2f2f2;
			}
		}
		.popupmaincss {
			// height: 992rpx;
			width: 750rpx;
			// padding-bottom: env(safe-area-inset-bottom);
			background-color: #fff;

			.titlecss {
				display: inline-block;
				width: 670rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #202020;
				padding: 16rpx 40rpx;
			}

			.conlistboxcss {
				width: calc(100% - 80rpx);
				margin-top: 42rpx;
				padding: 0 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				max-height: 45vh;
				overflow-y: auto;

				.conlicss {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.limiancss {
						background-image: url('https://wx.jisdkaisuo.com/uploads/20221211/6ea33e11258b586516c16af262d24435.png');
						background-size: 100% 100%;
						width: calc(100% - 100rpx);
						height: 244rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;
						padding-left: 48rpx;

						.lihboxcss {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							padding-top: 48rpx;

							.hcss {
								font-size: 50rpx;
								font-family: DIN Alternate-Bold, DIN Alternate;
								font-weight: bold;
								color: #FFFFFF;
							}

							.ycss {
								font-size: 25rpx;
								font-family: DIN Alternate-Bold, DIN Alternate;
								font-weight: bold;
								color: #FFFFFF;
							}

							.contcss {
								margin-left: 26rpx;
								padding: 6rpx 13rpx;
								display: inline-block;
								background: #FFFFFF;
								border-radius: 7rpx;
								font-size: 20rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #E8782E;
							}
						}

						.t1css {
							font-size: 30rpx;
							font-family: PingFang SC-Semibold, PingFang SC;
							font-weight: 600;
							color: #FFFFFF;
							padding: 12rpx 0 6rpx;
						}

						.t2css {
							font-size: 20rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							opacity: .6;
						}
					}

					.conimgcss {
						width: 52rpx;
						height: 52rpx;
						// margin-left: 52rpx;
					}
				}

				.nolistimgcss {
					width: 616rpx;
					height: 462rpx;
					margin: 108rpx 0 70rpx;
					background-image: url('https://wx.jisdkaisuo.com/uploads/20221211/3719dbe5d9ac5e64ae79b8df46ca69bd.png');
					background-size: 100% 100%;
					display: flex;
					align-items: flex-end;
					justify-content: center;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #A0A0A0;
				}
			}

			.popuptopcss {
				width: 100%;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				padding-bottom: 34rpx;

				.boxncss {
					padding: 14rpx 122rpx;
					background: linear-gradient(270deg, rgba(255, 255, 255, 0.0001) 0%, rgba(218, 217, 230, .3) 51.04%, rgba(255, 255, 255, 0.0001) 100%);
					mix-blend-mode: normal;

					.boxnncss {
						width: 56rpx;
						height: 4rpx;
						background: #BDBDBD;
						border-radius: 2rpx;
					}
				}
			}

			.popupmainbxocss {
				width: 670rpx;
				padding: 48rpx 40rpx 22rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.mainimgcss {
					width: 163.19rpx;
					height: 125.15rpx;
					margin-right: 24rpx;
				}

				.mianhboxcss {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.mainhcss {
						font-size: 28rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #202020;
					}

					.mainmoneycss {
						padding-top: 8rpx;
						font-size: 52rpx;
						font-family: DIN Pro-Bold, DIN Pro;
						font-weight: bold;
					}
				}
			}

			.mainlxcss {
				display: inline-block;
				width: 670rpx;
				padding: 38rpx 40rpx 24rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #202020;
			}

			.mianlinscss {
				width: calc(100% - 64rpx);
				max-height: 416rpx;
				padding-left: 40rpx;
				padding-right: 24rpx;
				overflow-y: auto;
				display: flex;
				flex-wrap: wrap;

				.minlicss {
					width: 210rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
					background: #F6F6F6;
					border-radius: 28rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #8F8F8F;
				}

				.minlihovercss {
					width: 210rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
					background: #FFE9DB;
					border-radius: 28rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #E8782E;
				}
			}

			.qdcss {
				width: 670rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin: 24rpx 40rpx 40rpx;
				background: #E8782E;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.fixboxcss {
			position: fixed;
			left: 0;
			bottom: 0;
			width: calc(100% - 40rpx);
			background-color: #fff;
			padding: 20rpx 0 calc(10rpx + env(safe-area-inset-bottom));
			padding-left: 40rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.kfboxcss {
				margin-left: 20rpx;
				margin-right: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 0;
				background-color: #fff;
				line-height: 1;

				.kficoncss {
					width: 80rpx;
					height: 40rpx;
					margin-bottom: 8rpx;
				}

				.kfhcss {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #F39801;
				}
			}

			.kfboxcss::after {
				border: none;
			}

			.btncss {
				width: 510rpx;
				height: 80rpx;
				background-color: #F39801;
				line-height: 80rpx;
				text-align: center;
				border-radius: 16rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.desulcss {
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			padding: 30rpx 32rpx 20rpx;
			background-color: #fff;
			margin-bottom: 16rpx;
		}

		.descriptioncss {
			padding-bottom: 20rpx;

			.deshcss {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 600;
				color: #000;
			}

			.destcss {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000;
				opacity: .5;
			}
		}

		.tabboxcss {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
		}

		.tablecss {
			width: 686rpx;
			padding: 0 32rpx;
			background-color: #fff;
		}

		.heightcss {
			height: 786rpx;
			overflow: hidden;
			position: relative;

			.tablefixedcss {
				position: absolute;
				bottom: 0;
				left: 32rpx;
				width: 686rpx;
				height: 154rpx;
				background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #E8782E;
				display: flex;
				align-items: flex-end;
				justify-content: center;
			}
		}

		.plboxcss {
			width: calc(100% - 80rpx);
			padding: 30rpx 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

			.plhcss {
				font-size: 28rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #202020;
			}

			.pltcss {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #8F8F8F;
			}

			.icon1css {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.swiperbox {
			position: relative;

			&_swiper {
				height: 380rpx;

				&_img {
					background: #f6f6f6;
					width: 100%;
					height: 100%;
				}
			}

			&_pobox {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: absolute;
				left: 0;
				bottom: 0;
				height: 92rpx;

				&_hbox {
					background-image: url('https://wx.jisdkaisuo.com/uploads/20221211/d55f9b24c9e4c201daf7c9d21f57d0d4.png');
					background-size: 100% 100%;
					width: 320rpx;
					height: 92rpx;
					display: flex;
					align-items: flex-end;
					justify-content: flex-start;
					margin-top: -20rpx;
					padding-bottom: 20rpx;
					padding-left: 38rpx;

					&_hcss {
						font-size: 28rpx;
						font-weight: bold;
					}

					&_tcss {
						font-size: 72rpx;
						font-weight: 500;
						padding: 0 18rpx;
						line-height: 72rpx;
					}

					&_tcss1 {
						font-size: 32rpx;
						font-weight: bold;
					}
				}

				&_tcss {
					padding-right: 42rpx;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}

		}

		.hboxcss {
			width: calc(100% - 80rpx);
			background-color: #fff;
			padding: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.hcss {
				font-size: 36rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #202020;
			}

			.iconboxcss {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0;
				background-color: #fff;
				margin: 0;

				.iconcss {
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}

				.iconhcss {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(32, 32, 32, 0.6);
				}
			}

			.iconboxcss::after {
				border: none;
			}
		}

		.gardbox {
			height: 20rpx;
			background: #f6f6f6;
		}
	}
</style>